<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/vaadin-material-theme/vaadin-combo-box.html">
<link rel="import" href="../view-app.html">
<link rel="import" href="../style/shared-styles.html">

<dom-module id="view-plan-production">
    <template>
        <style include="shared-styles app-grid-style">
             :host {
                margin: 10px;
                display: block;
                --app-grid-item-height: 50%;
                --app-grid-columns: 1;
            }

            .btn {
                margin: 20px 10px 0 0;
                width: 250px;
            }

            .frame {
                height: 750px;
            }
        </style>
        <firebase-auth app-name="smart-mes" id="auth" user="{{user}}"></firebase-auth>
        <firebase-document app-name="smart-mes" id="userData" path="/user/[[user.uid]]" data="{{k}}"></firebase-document>
        <firebase-query app-name="smart-mes" id="productQuery" path="/data/[[k.key]]/factoryData/product" order-by-child="id" production-by-value="true" data="{{productItems}}"></firebase-query>
        <firebase-query app-name="smart-mes" id="orderQuery" path="/data/[[k.key]]/orderData" order-by-child="order_no" order-by-value="true" data="{{orderItems}}"></firebase-query>
        <app-localstorage-document key="app-lang" data="{{language}}"></app-localstorage-document>

        <ul class="app-grid">
            <li>
                <div class="card">
                    <h1 class="title">Production Simulator</h1>
                    <div class="frame">

                    </div>
                    <div class="center">
                        <paper-button class="btn shamrock" on-click="_triggerSimulator" toggles elevation="0" noink>Start
                            <iron-icon icon="vaadin:play"></iron-icon>
                        </paper-button>
                        <paper-button class="btn" on-click="_editSimulator" elevation="0" noink>Edit Simulator</paper-button>
                    </div>
                </div>
            </li>
        </ul>

    </template>
    <script>
        /**
         * @ViewPlanProduction
         * @polymer 
         * @extends {Polymer.Element}
         */
        class ViewPlanProduction extends Polymer.mixinBehaviors([Polymer.AppLocalizeBehavior],
            Polymer.Element) {
            static get is() {
                return 'view-plan-production'
            }

            static get properties() {
                return {
                    language: String
                }
            }
            connectedCallback() {
                super.connectedCallback()
                this.loadResources(this.resolveUrl('../../data/locales.json'))
            }
        }
        customElements.define(ViewPlanProduction.is, ViewPlanProduction)
    </script>
</dom-module>